<template>
  <div class="task">
    <el-header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工单编号">
          <el-input v-model="formInline.taskCode" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select v-model="formInline.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in allTaskStatus"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
              clearable
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchApi">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <TaskTable :search-list="list" @search="searchfn" />
  </div>
</template>

<script>
import { allTaskStatusApi, search } from '@/api/task'
// import Table from './component/table'
export default {
  name: 'ElDkdPCIndex',
  components: {
    // Table
  },

  data() {
    return {
      formInline: {
        pageIndex: 1,
        pageSize: 10,
        taskCode: '',
        status: '',
        isRepair: true
      },
      allTaskStatus: {},
      list: {}
    }
  },
  created() {
    this.allTaskStatusApi()
  },

  mounted() {},

  methods: {
    async allTaskStatusApi() {
      this.allTaskStatus = await allTaskStatusApi()
    },
    async searchApi() {
      const res = await search(this.formInline)
      this.list = res
    },
    searchfn(val) {
      // if (this.list.currentPageRecords.length === 0 && this.list.totalPage !== 0) {
      //   this.formInline.pageIndex = this.formInline.pageIndex - 1
      //   this.searchApi()
      //   return
      // }
      this.formInline.pageIndex = val
      this.searchApi()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  margin-bottom: 20px;
  background-color: #fff;
  text-align: center;
  line-height: 60px;
  display: flex;
  .el-form {
    height: 100%;
    .el-form-item {
      .el-form-item__content {
        line-height: 60px !important;
      }
    }
  }
}
::v-deep .el-form-item__content {
  line-height: 60px !important;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #fff;
  // height: 660px;
  text-align: center;
}
</style>
